<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <h1>{{message}}</h1>
        <button @click="add0">添加一级属性</button>
        <button @click="add1">添加二级对象属性</button>
        <h1>{{student.name}}</h1>
        <h1>{{student.age}}</h1>
        <h1 v-if="student.sex">{{student.sex}}</h1>
        <h1 v-if="keyword">{{keyword}}</h1>
       
    </div>
</body>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: '列表排序',
                keyword:'',
                sortType:0,
                persons:[
                    {id:1,name:'张三',age:18},
                    {id:2,name:'李四',age:52},
                    {id:3,name:'王五',age:32},
                    {id:4,name:'刘五',age:43},
                    {id:5,name:'哈四',age:76},
                    {id:6,name:'鱼三',age:34}
                ],
                student:{
                    name:'张三',
                    age:18
                }
            },
            methods: {
                add0(){
                    //报错，不能直接在 vue实例上添加数据
                    app.$set("haha","add0");
                },
                add1(){
                    Vue.set(this.student,'sex','男');
                }
            },
           
        })
    </script>
</html>